<template>
  <div class="personal-home">
    <div class="background">
      <!-- 背景图片 -->
      <el-image class="background-image" :src="user.background_url" alt="Background" lazy fit="fill" />
      <!-- 悬浮的头像 -->
      <div class="avatar-container">
        <el-avatar :src="user.avatar_url" class="avatar"></el-avatar>
      </div>
    </div>
    <el-card class="user-info-card" @keyup.enter="submitForm">
      <div class="user-info">
        <!-- 表单 -->
        <el-form
            ref="userForm"
            :rules="rules"
            :model="form"
            label-width="100px"
        >
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="form.nickname"></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="username">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password" autocomplete="new-password" show-password clearable></el-input>
          </el-form-item>
          <!-- 确认密码 -->
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input type="password" v-model="form.confirmPassword" autocomplete="new-password" show-password clearable></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <!--          <el-form-item label="个人简介" prop="bio">-->
          <!--            <el-input type="textarea" v-model="user.bio"></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" @click="submitForm">保存</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {reactive, ref} from 'vue';
import { ElMessage } from 'element-plus';
import { useAuthStore } from "@/stores/auth.js";

const authStore = useAuthStore();
const userForm = ref(null);
const user = ref(authStore.user)
const form = reactive(user.value);


const confirmNewPasswordValidator = (rule, value, callback) => {
  console.log(value)
  if (value !== form.password) {
    callback(new Error('两次输入的新密码不一致'));
  } else {
    callback();
  }
};

const rules = ref({
  nickname:[
    { required: true, message: "请输入昵称", trigger: 'blur'}
  ],
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    { validator: confirmNewPasswordValidator, trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
  ],
  // bio: [
  //   { required: true, message: '请输入个人简介', trigger: 'blur' }
  // ]
});

const submitForm = () => {
  userForm.value.validate((valid) => {
    if (valid) {
      const { confirmPassword, ...submitData } = form;
      console.log(submitData);
      // 表单提交逻辑
      ElMessage.success('个人信息已更新');
    }
  });
};

const resetForm = () => {
  // 重置表单逻辑
  userForm.value.resetFields();
};
</script>

<style scoped>
.personal-home {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.background {
  position: relative;
  width: 100%;
  height: 300px;
}

.background-image {
  width: 100%;
  height: 100%;
}

.avatar-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

.avatar {
  width: 150px;
  height: 150px;
  border: 5px solid white;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.user-info-card {
  width: 80%;
  max-width: 500px;
  margin-top: 90px;
  margin-bottom: 50px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-info-card {
    width: 90%;
  }
}
</style>
